<template>
  <div>
    <el-card style="height: 100%;box-sizing: border-box;padding: 10px;">
      <span class="_before">购箱费用</span>
      <table
        style="font-size: 14px;width: 400px;margin-top: 20px;width:100%;border-collapse:separate; border-spacing:0px 10px;">
        <tbody>
        <tr style="width: 100px;">
          <td style="width:100px; ">箱型/箱况</td>
          <td align="right">{{ boxTypeFilter(rowData.boxType) }} / {{ boxConditionFilter(rowData.boxCondition) }}
          </td>
        </tr>
        <tr>
          <td>购箱单价</td>
          <td align="right">{{ payCurrency }} {{ rowData.unitPrice || 0 }}</td>
        </tr>
        <tr>
          <td>购箱数量</td>
          <td align="right" style="color: red;">{{ rowData.boxQuantity || 0 }}</td>
        </tr>
        <tr>
          <td>小计</td>
          <td align="right" style="color: red;">￥{{ numMulti(rowData.unitPrice, rowData.boxQuantity) || 0 }}</td>
        </tr>
        <tr>
          <td>优惠券</td>
          <td align="right">
            <template v-if="rowData.couponAmount">
              {{ rowData.couponAmount}}
            </template> 
            <template v-else>
              无
            </template>
           </td>
        </tr>
      </tbody>
      </table>
      <div style="margin-top: 50px;">
        <div style="border-bottom:3px Dotted  #999999; width: 100%;"></div>
        <table style="width:100%">
          <!-- <tr>
            <td style="width:100px; ">合计</td>
            <td align="right" style="color: red;">￥{{ rowData.amount }}</td>
          </tr>
          <tr>
            <td>折合</td>
            <td align="right">$ {{ rowData.amount }}</td>
          </tr>
          <tr>
            <td>本单执行汇率</td>
            <td align="right">1美元 =
              <el-input v-model="rowData.rate" disabled style="width:100px"></el-input>
              元
            </td>
          </tr> -->
          <tbody>
          <tr>
            <td>应付购箱费</td>
            <td align="right" style="color: red;">{{ payCurrency }}{{ rowData.amount }}</td>
          </tr>
          </tbody>
        </table>
      </div>

    </el-card>
  </div>
</template>
<script setup lang="ts">
import { numMulti, numAdd } from '@/utils/compute'
import { number } from 'echarts';
import { computed } from 'vue';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => ({})
  },
  rate: {
    type: Number,
    default: 0
  }
})

const payCurrency = computed(() => {
  if (props.rowData && props.rowData.payCurrency) {
    return props.rowData.payCurrency == 'CNY' ? '￥' : '$'
  } else {
    return '￥'
  }
})

//过滤
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
</script>
<style lang="less" scoped></style>
